<template>
  <div>
    <Form class="unit-echart-form" :label-width="100" v-model="filterForm">
      <Row :gutter="16">
        <Col span="6">
          <FormItem label="统计周期">
            <DatePicker
              type="daterange"
              v-model="filterForm.dateRange"
              @on-change="handleSubmit"
              placement="bottom-start"
              placeholder="请选择时间"
            ></DatePicker>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="伙食单位">
            <Select
              v-model="filterForm.subUnitCode"
              @on-change="handleSubmit"
              style="width: 200px"
            >
              <Option
                v-for="item in dropSelectList"
                :key="item.id"
                :value="item.unitCode"
              >
                {{ item.unitName }}</Option
              >
            </Select>
          </FormItem>
        </Col>
      </Row>
    </Form>
    <div class="unit-echart-title flex">
      <h2>{{ subUnitName }}单位出入库统计</h2>
    </div>
    <div class="unit-chart-wrap">
      <v-chart :option="chartOption" autoresize></v-chart>
    </div>
  </div>
</template>
<script>
import {
  getSubCanteenList,
  getUnitEchartData,
} from "@/api/organ/organization";
export default {
  data() {
    return {
      chartOption: {
        color: ["#1E6FFF", "#FFA901", "#01D1FF"],
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: "15%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },
        legend: {
          x: "right", // 设定图例在左、右、居中
          y: "top", // 设定图例在上、下、居中
          padding: [10, 50, 12, 0], // 设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
          itemWidth: 16, // 宽
          itemHeight: 16, // 高
          textStyle: {
            //图例文字的样式
            color: "#666666",
            fontSize: 14,
          },
          data: ["入库量", "出库量", "采购量"],
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            axisTick: {
              // 轴刻度
              show: true,
            },
            axisLine: {
              // 轴线
              show: true,
              lineStyle: {
                color: "#E6E6E6",
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#666666",
              },
            },
            // prettier-ignore
            data: [],
          },
        ],
        yAxis: [
        {
            type: "value",
            name: "单位: 千克 (kg)",
            nameTextStyle: {
              padding: [1, 0, 30, 50],
            },
          },
        ],
        series: [
          {
            name: "入库量",
            type: "bar",
            barWidth: 25, //柱图宽度
            barGap: "30%", // 柱图间距离
            data: [],
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示数值
                  position: "top", //数值在上方显示
                  textStyle: {
                    //数值样式
                    color: "#666666", //字体颜色
                    fontSize: 14, //字体大小
                  },
                },
              },
            },
          },
          {
            name: "出库量",
            type: "bar",
            barWidth: 25, //柱图宽度
            barGap: "30%", // 柱图间距离
            data: [],
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示数值
                  position: "top", //数值在上方显示
                  textStyle: {
                    //数值样式
                    color: "#666666", //字体颜色
                    fontSize: 14, //字体大小
                  },
                },
              },
            },
          },
          {
            name: "采购量",
            type: "bar",
            barWidth: 25, //柱图宽度
            barGap: "30%", // 柱图间距离
            data: [],
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示数值
                  position: "top", //数值在上方显示
                  textStyle: {
                    //数值样式
                    color: "#666666", //字体颜色
                    fontSize: 14, //字体大小
                  },
                },
              },
            },
          },
        ],

      },
      dropSelectList: [],
      filterForm: {
        dateRange: [
          new Date(
            new Date().setHours(0, 0, 0) -
              (new Date().getDay() - 1) * 24 * 60 * 60 * 1000
          ),
          new Date(
            new Date().setHours(0, 0, 0) +
              (7 - new Date().getDay()) * 24 * 60 * 60 * 1000
          ),
        ],
        subUnitCode: "",
      },
      subUnitName: "",
     flag:false
    };
  },
  mounted() {
    this.getSubCanteenList();
  },
  methods: {
    getSubCanteenList() {
      getSubCanteenList().then((res) => {
        if (res.code == 1) {
          this.dropSelectList = this.dropSelectList.concat(res.data.list);
          if(res.data.list.length>0) {
            this.filterForm.subUnitCode = this.dropSelectList[0].unitCode;
            this.subUnitName = this.dropSelectList[0].unitName;
          }
          this.getEchartData();
        }
      });
    },
    getEchartData() {
      let params = {};
      params.startDate = this.filterForm.dateRange[0].Format("yyyy-MM-dd");
      params.stopDate = this.filterForm.dateRange[1].Format("yyyy-MM-dd");
      params.unitCode = this.filterForm.subUnitCode;
      getUnitEchartData(params).then((res) => {
       let dataX = [];
       let oneDataY = [];
       let twoDataY = [];
       let threeDataY = [];
        if (res.code == 1) {
          res.data.forEach((item) => {
            dataX.push(item.rationClassName);
            oneDataY.push(item.stockAmount);
            twoDataY.push(item.outStockAmount);
            threeDataY.push(item.purchasedAmount);
          });
          this.chartOption.xAxis[0].data = dataX.length>0?dataX:['演示1','演示2','演示3'];
          this.chartOption.series[0].data = oneDataY.length>0?oneDataY:[1,2,3];
          this.chartOption.series[1].data = twoDataY.length>0?twoDataY:[1,2,3];
          this.chartOption.series[2].data = threeDataY.length>0?threeDataY:[1,2,3];
        }
      })
    },
    handleSubmit(nVew) {
      this.dropSelectList.forEach(element=>{
        if(element.unitCode === nVew) {
          this.subUnitName = element.unitName;
        }
      })
      this.getEchartData();
    },
    handleReset() {
      this.filterForm.dateRange = [
        new Date(
          new Date().setHours(0, 0, 0) -
            (new Date().getDay() - 1) * 24 * 60 * 60 * 1000
        ),
        new Date(
          new Date().setHours(0, 0, 0) +
            (7 - new Date().getDay()) * 24 * 60 * 60 * 1000
        ),
      ];
      this.getEchartData();
    },
  },
};
</script>
<style lang="scss" scoped>
.unit-echart-form {
  display: block !important;
}
.ivu-date-picker {
  width: 100%;
}
.unit-chart-wrap {
  padding: 0px 20px;
  height: calc(100vh - 320px);
}
.unit-echart-title {
  height: 80px;
}
::v-deep .ivu-input-wrapper {
  width: 200px;
}
</style>
